<template>
    <div>
        <el-form class="searchForm" :model="searchForm" inline>
            <el-form-item prop="booksName">
                <el-input v-model="searchForm.booksName" placeholder="请输入书名"></el-input>
            </el-form-item>
            <el-form-item prop="author">
                <el-input v-model="searchForm.author" placeholder="请输入作者"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getData" type="primary">查找</el-button>
                <el-button @click="openDialog('添加', 'add', null)" type="primary">添加</el-button>
            </el-form-item>
        </el-form>

        <el-table
            :data="tableData"
            :header-cell-style="{'text-align': 'center'}"
            :cell-style="{'text-align': 'center'}"
            border
        >
            <el-table-column label="书籍图片" prop="booksUrl">
                <template slot-scope="scope">
                    <img :src="scope.row['booksUrl']" style="width: 100px"/>
                </template>
            </el-table-column>
            <el-table-column label="书籍名称" prop="booksName"></el-table-column>
            <el-table-column label="作者" prop="author"></el-table-column>
            <el-table-column label="数量" prop="quantity"></el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="openDialog('编辑', 'edit', scope.row)" type="primary" size="mini">编辑</el-button>
                    <el-button @click="deleteData(scope.row)" type="danger" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
            :visible.sync="dialogVisible"
            :title="dialogTitle"
            :before-close="handleClose"
            width="500"
        >
            <el-form
                ref="dialogForm"
                :rules="formRules"
                :model="dialogFormData"
                label-width="100px"
            >
                <el-form-item label="书籍名称" prop="booksName">
                    <el-input v-model="dialogFormData.booksName"></el-input>
                </el-form-item>
                <el-form-item label="作者" prop="author">
                    <el-input v-model="dialogFormData.author"></el-input>
                </el-form-item>
                <el-form-item label="书籍图片" prop="booksUrl">
                    <!-- <el-input v-model="dialogFormData.booksUrl"></el-input> -->
                    <el-upload
                        class="booksUrl-upload"
                        action=""
                        :show-file-list="false"
                        :on-success="iconUrlSuccess"
                    >
                        <img v-if="dialogFormData.booksUrl" :src="dialogFormData.booksUrl" style="width: 100px" />
                        <i
                            v-else
                            class="el-icon-plus booksUrl-upload-icon"
                            style="width:100px;height:100px;border-radius:10px;border:2px dashed #ddd;line-height:100px;"
                        ></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="数量" prop="quantity">
                    <el-input-number v-model="dialogFormData.quantity" :min="1"></el-input-number>
                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm" type="primary">确定</el-button>
            </span>
        </el-dialog>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.pageIndex"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total">
        </el-pagination>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'booksList',
    componentTitle: '图书列表',
    data () {
        return {
            dialogVisible: false,
            dialogTitle: '添加',
            dialogType: 'add',
            dialogFormData: {
                booksName: '',
                author: '',
                booksUrl: '',
                quantity: ''
            },
            tableData: [],
            pageInfo: {
                pageIndex: 1,
                pageSize: 10,
                total: 0
            },
            searchForm: {
                booksName: '',
                author: ''
            },
            formRules: {
                booksName: [
                    {required: true, message: '请输入书籍名称', trigger: 'change'}
                ],
                author: [
                    {required: true, message: '请输入作者', trigger: 'change'}
                ]
            }
        }
    },
    mounted () {
        this.getData()
    },
    methods: {
        newUrl (booksUrl) {
            if (booksUrl != '') {
                return booksUrl.replace(/localhost:8888/g, '127.0.0.1:3000')
            }
        },
        openDialog (title, type, row) {
            this.dialogVisible = true
            this.dialogType = type
            this.dialogTitle = title

            if (type === 'edit') {
                this.$nextTick(() => {
                    this.dialogFormData = Object.assign({}, row)
                })
            }
        },
        cancel () {
            this.dialogVisible = false
            this.$refs.dialogForm.resetFields()
        },
        confirm () {
            this.$refs.dialogForm.validate(valid => {
                if (valid) {
                    if (this.dialogType === 'add') {
                        this.addData()
                    } else if (this.dialogType === 'edit') {
                        this.editData()
                    }
                } else {
                    return false
                }
            })
        },
        getData () {
            axios({
                url: 'http://127.0.0.1:3000/api/books/list',
                method: 'get',
                params: {
                    pageIndex: this.pageInfo.pageIndex,
                    pageSize: this.pageInfo.pageSize,
                    ...this.searchForm
                }
            }).then(res => {
                console.log(res)
                this.tableData = res.data.data
                this.pageInfo.total = res.data.total
            })
        },
        addData () {
            axios({
                url: 'http://127.0.0.1:3000/api/books/add',
                method: 'post',
                data: {
                    ...this.dialogFormData
                }
            }).then(res => {
                if (res.data.code === 200) {
                    this.cancel()
                    this.$notify.success({title: '添加成功'})

                    this.getData()
                } else {
                    this.$notify.error({title: '添加失败'})
                }
            })
        },
        editData () {
            axios({
                url: 'http://127.0.0.1:3000/api/books/update',
                method: 'put',
                data: {
                    ...this.dialogFormData,
                }
            }).then(res => {
                if (res.data.code === 200) {
                    this.cancel()
                    this.$notify.success({title: '编辑成功'})

                    this.getData()
                } else {
                    this.$notify.error({title: '编辑失败'})
                }
            })
        },
        deleteData (row) {
            this.$confirm('确定删除？').then(() => {
                axios({
                    url: 'http://127.0.0.1:3000/api/books/delete',
                    method: 'delete',
                    params: row
                }).then(() => {
                    this.$notify.success({title: '删除成功'})

                    this.getData()
                })
            })
        },
        handleClose (done) {
            this.$confirm('确定关闭？').then(_ => {
                console.log(_)
                done()
                this.cancel()
            }).catch(_ => {
                console.log(_)
            })
        },
         // 每页多少条切换
        handleSizeChange(value) {
            this.pageInfo.pageSize = value;

            this.getData();
        },
        // 当前页码的切换
        handleCurrentChange(value) {
            this.pageInfo.pageIndex = value;

            this.getData();
        },
    }
}
</script>

<style lang="scss" scoped>
    .searchForm {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
    }
</style>